<template>
  <div>
    <el-card class="box-card" v-for="face in faces" :key="face.name" style="margin-bottom:10px;">
      <div slot="header" class="clearfix">
        <span>{{face.name}}</span> &nbsp;&nbsp;
        <span>接收量 : {{face.inBytes | filesize}}</span> &nbsp;&nbsp;
        <span>接收速率 : {{face.inSpeedCur | filesize}}/s</span> &nbsp;&nbsp;
        <span>发送量 : {{face.outBytes | filesize}}</span> &nbsp;&nbsp;
        <span>发送速率 : {{face.outSpeedCur | filesize}}/s</span> 
      </div>
      <div style="height:200px;">
        <canvas :id="'face-'+face.name"></canvas>
      </div>
    </el-card>
  </div>
</template>
<script>
import Chart from 'chart.js'
import RegexMatch from '../../utils/RegexMatch.js'
import Common from '../../utils/Common.js'
import Formatter from '../../utils/Formatter.js'
export default {
    data () {
        return {
            faces : {},
            faceRefreshTimer : null,
            faceRefreshInterval : 1000,
            faceRefreshXCount : 100,
            enable : false,
        };
    },
    filters : {
        filesize ( value ) {
            return Formatter.asFileSize(value);
        },
    },
    async mounted() {
        let server = this.$store.getters.serverCurrent;
        let client = await server.getSshClient();
        let procNetDev = await client.exec('cat /proc/net/dev');
        procNetDev = procNetDev.trim().split('\r\n');
        procNetDev.shift(); procNetDev.shift();

        for ( let i=0; i<procNetDev.length; i++ ) {
            let data = RegexMatch.match('proc-net-dev', procNetDev[i].trim());
            let face = {};
            face.name = data.face;
            face.inBytes = data.recBytes * 1;
            face.outBytes = data.traBytes * 1;
            face.inSpeed = [0];
            face.outSpeed = [0];
            face.inSpeedCur = 0;
            face.outSpeedCur = 0;
            this.faces[face.name] = face;
        }

        this.$forceUpdate();
        await Common.msleep(1000);

        for ( let face in this.faces ) {
            face = this.faces[face];
            face.chart = this.setupChart(face);
        }

        await this.refresh();
    },
    destroyed() {
        if ( null != this.faceRefreshTimer ) {
            clearTimeout(this.faceRefreshTimer);
        }
    },
    methods : {
        /** */
        start() {
            this.enable = true;
            this.refresh();
        },
        /** */
        stop() {
            this.enable = false;
            if ( null != this.faceRefreshTimer ) {
                clearTimeout(this.faceRefreshTimer);
            }
        },
        /** 刷新数据 */
        async refresh() {
            if ( !this.enable ) {
                return;
            }
            let server = this.$store.getters.serverCurrent;
            let client = await server.getSshClient();
            let procNetDev = await client.exec('cat /proc/net/dev');
            procNetDev = procNetDev.trim().split('\r\n');
            procNetDev.shift(); procNetDev.shift();

            let xCount = this.faceRefreshXCount;
            for ( let i=0; i<procNetDev.length; i++ ) {
                let data = RegexMatch.match('proc-net-dev', procNetDev[i].trim());
                let face = this.faces[data.face];
                if ( face.chart.data.labels.length < xCount ) {
                    face.chart.data.labels.push(' ');
                }

                face.inSpeedCur = (data.recBytes - face.inBytes) * 1000 / this.faceRefreshInterval;
                face.inSpeed.push(face.inSpeedCur);
                if ( face.inSpeed.length > xCount ) {
                    face.inSpeed.shift();
                }
                face.inBytes = data.recBytes;
                face.chart.data.datasets[0].data = face.inSpeed;
                
                face.outSpeedCur = (data.traBytes - face.outBytes) * 1000 / this.faceRefreshInterval;
                face.outSpeed.push(face.outSpeedCur);
                if ( face.outSpeed.length > xCount ) {
                    face.outSpeed.shift();
                }
                face.outBytes = data.traBytes;
                face.chart.data.datasets[1].data = face.outSpeed;
                face.chart.update();
            }

            let $this = this;
            this.faceRefreshTimer = setTimeout(function() {
                $this.refresh();
            }, this.faceRefreshInterval);
        },

        /** 初始化折线图 */
        setupChart( face ) {
            let ctx = document.getElementById(`face-${face.name}`).getContext('2d');
            let chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['0'],
                    datasets: [{
                        label: '接收',
                        fill:false,
                        borderColor: '#FFCC00',
                        data: [0],
                    }, {
                        label: '发送',
                        fill:false,
                        borderColor: '#00CC00',
                        data: [0],
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    responsive: true,  
                    scales: {
                        yAxes: [{
                            ticks: {
                                callback: function(label, index, labels) {
                                    return Formatter.asFileSize(label);
                                }
                            },
                        }]
                    }
                }
            });
            return chart;
        }
    }
}
</script>